// src/pages/personal/index.tsx
import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import Header from "@shared/header";
import Back from "@shared/back";
import { useNavigate } from'react-router-dom';

export default function Personal() {
  const navigate = useNavigate();

  const handleClick = () => {
      navigate('/login');
  };
  return (
    <div className={styles.page}>
      <Header title="个人信息" left={<Back />} />
      <ul className={styles.options}>
        <li>
          <span>头像</span>
          <div className={styles.value}>
            <div className={styles.avatar}>
              <img
                src="http://toutiao.itheima.net/images/user_head.jpg"
                alt="avatar"
              />
            </div>
            <GeekIcon type="iconbtn_right" className={styles.icon} />
          </div>
        </li>
        <li>
          <span>昵称</span>
          <div className={styles.value}>
            <span>油炸小饭团</span>
            <GeekIcon type="iconbtn_right" className={styles.icon} />
          </div>
        </li>
        <li>
          <span>简介</span>
          <div className={styles.value}>
            <span>简介</span>
            <GeekIcon type="iconbtn_right" className={styles.icon} />
          </div>
        </li>
      </ul>
      <ul className={styles.options}>
        <li>
          <span>性别</span>
          <div className={styles.value}>
            <span>男</span>
            <GeekIcon type="iconbtn_right" className={styles.icon} />
          </div>
        </li>
        <li>
          <span>生日</span>
          <div className={styles.value}>
            <span>2023-01-07</span>
            <GeekIcon type="iconbtn_right" className={styles.icon} />
          </div>
        </li>
      </ul>
      <button className={styles.logout} onClick={()=>{
        handleClick()
        localStorage.removeItem("token")
      }}>退出登录</button>
    </div>
  );
}